<template>
  <div class="prize-pre-setting">
    <div class="prize-row">
      <div class="left-part">
        <el-switch
          style="display: block"
          v-model="enablePreset"
          @change="changePreset"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="启用预设">
        </el-switch>
      </div>
      <div class="right-part">
        <el-button type="primary" @click="openDialog">添加观众</el-button>
        <el-button type="text">帮助</el-button>
      </div>
    </div>
    <div class="prize-row">
      <div class="left-part">
        <el-button type="primary" @click="batchSet">批量设为</el-button>
        <el-select v-model="settingStatus" placeholder="排除或奖项">
          <el-option v-for="item in statusList" :key="item.value" :label="item.awardName" :value="item.value"></el-option>
        </el-select>
        <el-button type="text">帮助</el-button>
      </div>
      <div class="right-part">
        <el-button type="danger" @click="deleteBatch">批量删除</el-button>
        <el-button type="text" @click="reserveSelection">反选</el-button>
      </div>
    </div>
    <el-table
      ref="table"
      :data="nameList"
      border
      style="width: 100%"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="头像">
        <template slot-scope="scope">
          <div class="table-avatar">
            <img :src="scope.row.headImgUrl" :alt="scope.row.userName"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="userName"
        label="昵称"
        width="120"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="tel"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="decideint"
        :formatter="formatStatus"
        label="排除或内定奖项">
      </el-table-column>
      <el-table-column
        prop="userType"
        :formatter="formatType"
        label="类型">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="removeTableItem(scope.row, scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <modal :visible="showDialog" :width="550" :top="100" @close="showDialog = false" class="data-modal" :title="addType === '1' ? '添加真实观众' : '添加虚拟用户'">
      <el-tabs type="border-card" v-model="addType" @tab-click="tabClick">
        <el-tab-pane name="1" label="真实观众">
          <el-row type="flex" justify="space-between" >
            <el-col :span="18">
              <el-input prefix-icon="el-icon-search" placeholder="请输入昵称" v-model="addModel.keywords">
                <el-button type="primary" slot="append" @click="searchUser">搜索观众</el-button>
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-button type="text">没有找到观众？</el-button>
            </el-col>
          </el-row>
          <div class="modal-content">
            <div v-if="addModel.searchList && addModel.searchList.length > 0">
              <el-row v-for="(item, index) in addModel.searchList" :key="index">
                <el-col :span="2" class="checkbox-col">
                  <el-checkbox v-model="item.isChecked"></el-checkbox>
                </el-col>
                <el-col :span="22" class="avatar-col">
                  <img :src="item.HEADIMGURL" :alt="item.NICKNAME" class="avatar"/>
                  <label class="nickname">{{item.NICKNAME}}</label>
                </el-col>
              </el-row>
            </div>
            <span v-else class="no-data">未找到该昵称用户</span>
          </div>
          <div class="modal-footer">
            <el-button type="primary" plain @click="showDialog = false">取消</el-button>
            <el-button type="primary" @click="addRealUser">确认</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane name="2" label="虚拟观众">
          <div>
            <el-button type="primary" plain @click="addVirtualUser">添加</el-button>
            <el-button type="primary" @click="randomUser">随机生成</el-button>
            <el-input-number v-model="addModel.randomNum" :min="0"></el-input-number>
          </div>
          <div class="modal-content">
            <div v-if="addModel.virtualList && addModel.virtualList.length > 0">
              <el-row v-for="(item, index) in addModel.virtualList" :key="index">
                <el-col :span="4">
                  <el-button type="text">选择头像</el-button>
                </el-col>
                <el-col :span="4" class="avatar-col">
                  <img :src="item.headerImgUrl" :alt="item.nickName" class="avatar"/>
                </el-col>
                <el-col :span="10">
                  <el-input v-model="item.nickName" placeholder="输入昵称"></el-input>
                </el-col>
                <el-col :span="4" v-if="addModel.virtualList.length > 1">
                  <el-button type="text" @click="removeVirtualUser(index)">删除</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="modal-footer">
            <el-button type="primary" plain @click="showDialog = false">取消</el-button>
            <el-button type="primary" @click="addVirtualList">确认</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- <el-form :model="prizeObj" label-width="90px">
          <el-form-item label="奖项名称：">
              <el-input v-model="prizeObj.prizeClass" placeholder="奖项名称">
              </el-input>
          </el-form-item>
          <el-form-item label="奖品名称：">
              <el-input v-model="prizeObj.prizeName" placeholder="奖品名称">
              </el-input>
          </el-form-item>
          <el-form-item label="奖品数量：">
              <el-input-number v-model="prizeObj.totalCount" :min="1" label="奖品数量">
              </el-input-number>
          </el-form-item>
          <el-form-item label="奖品图片：">
              <el-button type="primary">素材库</el-button>
              <div class="img-preview">
                  <div class="img-box">
                      <img :src="prizeObj.imgSrc || noData"/>
                  </div>
                  <el-button type="text" @click="removePrizeImg">删除</el-button>
              </div>
          </el-form-item>
          <el-form-item>
              <el-button plain type="primary" @click="showPrizeDialog = false">取消</el-button>
              <el-button type="primary" @click="commitPrize">确认</el-button>
          </el-form-item>
      </el-form> -->
    </modal>
  </div>
</template>

<script>
export default {
  name: "prizePreSetting",
  props: ["pageId", "enablePreset"],
  data () {
    return {
      // enablePreset: false,
      showDialog: false,
      settingStatus: null,
      multiSelection: [],
      selectIds: [],
      addType: '1',
      addModel: {
        keywords: "",
        randomNum: null,
        searchList: [
          { HEADIMGURL: "", NICKNAME: "张三"},
          { HEADIMGURL: "", NICKNAME: "李四"},
          { HEADIMGURL: "", NICKNAME: "王二"},
        ],
        virtualList: [
          {headImgUrl: "", nickName: ""}
        ]
      },
      nameList: [
        {
          presetId: "1",
          headImgUrl: "",
          userName: "Tome",
          tel: "021-88889999",
          phone: "18866668888",
          email: "tom@qq.com",
          decideint: 1,
          userType: 0
        },
        {
          presetId: "2",
          headImgUrl: "",
          userName: "Tome",
          tel: "021-88889999",
          phone: "18866668888",
          email: "tom@qq.com",
          decideint: 1,
          userType: 3
        }
      ],

      statusList: [
        {awardName: "排除", value: "N"},
      ],
    }
  },

  created() {
    this.getAwardList();
    this.getPreSettingList();
  },

  methods: {

    // 打开dialog同时加载真实用户列表
    openDialog() {
      this.showDialog = true;
      this.searchUser();
    },

    // 启/禁用预设
    changePreset() {
      this.$api.post('/preset/enablePresetUser', {
        sceneId: this.$route.query.sceneId,
        pageId: this.pageId,
        enablePreset: this.enablePreset
      }, response => {
        console.log(response)
        this.$message({
          type: "success",
          message: "操作成功"
        })
      }, fail => {
        this.$message.error(fail)
      })
    },

    // 获取奖项列表
    getAwardList() {
      this.$api.post('/redemption/queryBySceneId', {
        sceneId: this.$route.query.sceneId,
        pageId: this.pageId
      }, response => {
        console.log(response)
        response.forEach(item => {
          item.value = item.awardName;
        })
        this.statusList = this.statusList.concat(response);
      }, fail => {
        this.$message.error(fail);
      })
    },

    // 获取预设名单列表
    getPreSettingList() {
      this.$api.post('/preset/queryUserByScene', {
        sceneId: this.$route.query.sceneId,
        pageId: this.pageId
      }, response => {
        console.log(response)
        this.nameList = response;
      }, fal => {
        this.$message.error(fal);
      });
    },

    // 批量删除
    deleteBatch() {
      if (this.multiSelection.length > 0) {
        let arr = [];
        this.multiSelection.forEach(selection => {
          arr.push({
            userType: selection.userType,
            presetId: selection.presetId
          })
        })
        console.log(arr);
        this.$api.post('/preset/del', {
          dataIds: arr
        }, response => {
          this.$message({
            type: "success",
            message: "操作成功"
          })
          this.getPreSettingList();
        }, fail => {
          this.$message.error(fail);
        })
      } else {
        this.$message({
          type: "warning",
          message: "请选择操作项"
        })
      }
    },

    // 批量设为
    batchSet() {
      if (!this.settingStatus) {
        return;
      } else if (this.multiSelection.length === 0) {
        this.$message({
          type: "warning",
          message: "请选择操作项"
        })
      } else {
        this.$api.post('/preset/update', {
          dataIds: this.selectIds.join(','),
          decideint: this.settingStatus
        }, response => {
          this.$message({
            type: "success",
            message: "操作成功"
          })
          this.multiSelection.forEach(item => {
            item.decideint = this.settingStatus;
          })
        }, fail => {
          this.$message.error(fail);
        })
      }
    },

    handleSelectionChange(val) {
      console.log(val)
      this.multiSelection = val;
      this.selectIds = [];
      this.multiSelection.forEach(item => {
        this.selectIds.push(item.presetId);
      })
      console.log(this.selectIds)
    },
    reserveSelection() {
      this.nameList.forEach(item => {
        this.$refs.table.toggleRowSelection(item);
      })
    },

    removeTableItem(rowData, index) {
      console.log(rowData)
      this.nameList.splice(index, 1);
    },

    tabClick(tab, event) {
      console.log(tab, event);
    },

    // 搜索用户
    searchUser() {
      console.log(this.addModel.keywords)
      this.$api.post('/preset/fuzzyQueryUser', {
        sceneId: this.$route.query.sceneId,
        userName: this.addModel.keywords
      }, response => {
        console.log(response)
        this.addModel.searchList = response;
      }, fal => {
        this.$message.error(fal);
      });
    },

    // 添加真实用户
    addRealUser() {
      let selectUsers = this.addModel.searchList.filter(item => {
        return item.isChecked;
      })
      if (selectUsers.length === 0) {
        return this.$message({
          type: "warning",
          message: "请选择需要添加的用户"
        })
      } else {
        let ids = [];
        selectUsers.forEach(item => {
          ids.push(item.ID);
        })
        this.$api.post('/preset/add', {
          sceneId: this.$route.query.sceneId,
          pageId: this.pageId,
          userType: 0, // 0-真实用户 3-虚拟用户
          userId: ids.join(',')
        }, response => {
          this.$message({
            type: "success",
            message: "操作成功"
          })
          this.showDialog = false;
          this.getPreSettingList();
        }, fail => {
          this.$message.error(fail)
        })
      }
    },

    // 添加虚拟用户
    addVirtualList() {
      let unemptyList = this.addModel.virtualList.filter(item => {
        return !!item.nickName
      })
      if (unemptyList.length === 0) {
        return this.$message({
          type: "warning",
          message: "请先添加有效的用户"
        })
      } else {
        this.$api.post('/preset/add', {
          sceneId: this.$route.query.sceneId,
          pageId: this.pageId,
          userType: 3, // 0-真实用户 3-虚拟用户
          data: unemptyList
        }, response => {
          this.$message({
            type: "success",
            message: "操作成功"
          })
          this.showDialog = false;
          this.addModel.virtualList = [];
          this.getPreSettingList();
        }, fail => {
          this.$message.error(fail)
        })
      }
    },

    addVirtualUser() {
      this.addModel.virtualList.push({});
    },
    removeVirtualUser(index) {
      this.addModel.virtualList.splice(index, 1);
    },
    randomUser() {
      if (this.addModel.randomNum > 0) {
        for (let i = 0; i < this.addModel.randomNum; i++) {
          this.addModel.virtualList.push({})
        }
      }
    },

    formatStatus(item) {
      if (item.decideint === "N") {
        return "排除"
      } else {
        return item.decideint;
      }
    },
    formatType(item) {
      if (item.userType === 0) {
        return "真实观众"
      } else if (item.type === 3) {
        return "虚拟用户"
      } else {
        return "错误数据"
      }
    }
  }
}
</script>

<style lang="scss">
  .prize-pre-setting {
    padding-bottom: 50px;

    .el-button--text {
      padding-left: 20px;
      padding-right: 20px;

      &:hover span {
        text-decoration: underline;
      }
    }

    .prize-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 30%;
      margin-bottom: 20px;
    }

    .table-avatar {
      img {
        @include default-avatar;
      }
    }

    .data-modal {
      padding-bottom: 30px;

      .modal-content {
        margin: 20px 0;
        max-height: 150px;
        overflow: auto;

        .el-row {
          padding: 5px 0;

          .checkbox-col {
            line-height: 30px;
          }

          .avatar-col {

            .avatar {
              float: left;
              width: 30px;
              height: 30px;
              border: 1px solid #aaa;
              border-radius: 50%;
              color: #aaa;
              overflow: hidden;
            }

            .nickname {
              float: left;
              display: block;
              color: rgb(56, 54, 54);
              line-height: 30px;
              margin-left: 15px;
              font-size: 14px;
            }
          }
        }

        .no-data {
          font-size: 14px;
          color: #aaa;
        }
      }
    }
  }
</style>

